<template>
  <div class="sidebar">
    <div class="sidebar-header">
      <h2>系统导航</h2>
    </div>
    <ul class="nav-menu">
      <li :class="{ active: $route.path === '/task-list' }">
        <router-link to="/task-list">
          <i class="el-icon-list" />
          <span>任务列表</span>
        </router-link>
      </li>
      <li :class="{ active: $route.path === '/basic-setting' }">
        <router-link to="/basic-setting">
          <i class="el-icon-setting" />
          <span>基本设置</span>
        </router-link>
      </li>
      <li :class="{ active: $route.path === '/my-share' }">
        <router-link to="/my-share">
          <i class="el-icon-share" />
          <span>我的分享</span>
        </router-link>
      </li>
      <li :class="{ active: $route.path === '/my-subscription' }">
        <router-link to="/my-subscription">
          <i class="el-icon-star-on" />
          <span>我的订阅</span>
        </router-link>
      </li>
      <li :class="{ active: $route.path === '/risk-file' }">
        <router-link to="/risk-file">
          <i class="el-icon-warning" />
          <span>风险文件</span>
        </router-link>
      </li>
      <li :class="{ active: $route.path === '/upload-record' }">
        <router-link to="/upload-record">
          <i class="el-icon-upload" />
          <span>上传记录</span>
        </router-link>
      </li>
      <li :class="{ active: $route.path === '/download-record' }">
        <router-link to="/download-record">
          <i class="el-icon-download" />
          <span>下载记录</span>
        </router-link>
      </li>
      <li :class="{ active: $route.path === '/subscription-approval' }">
        <router-link to="/subscription-approval">
          <i class="el-icon-check" />
          <span>订阅审批</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>

</script>

<style scoped>
.sidebar {
  width: 220px;
  height: 100vh;
  background-color: #262734;
  color: #ffffffff;
  box-sizing: border-box;
  overflow-y: auto; 
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #fe6666ff;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.nav-menu li {
  margin: 0;
  padding: 0;
}

.nav-menu a {
  display: flex;
  align-items: center;
  padding: 12px 25px;
  color: #ffffffff;
  text-decoration: none;
  transition: all 0.3s;
  width: 100%; 
  box-sizing: border-box;
}

.nav-menu a:hover,
.nav-menu li.active a {
  background-color: #262734;
  color: #ffffffff;
}

.nav-menu i {
  margin-right: 10px;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(248, 248, 248, 0.3);
  border-radius: 3px;
}
</style>
    